<template>
  <div class="home">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item>
        <img src="@/assets/user/icon.png" alt="" />
        <span class="span">用户管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="span" style="color: #666">认证信息</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体 -->
    <div class="box">
      <!-- 头部-->
      <div class="title">
        <h5></h5>
        <h3>开票信息</h3>
      </div>
      <!-- 编辑按钮 -->
      <h4 class="redact">
        <span v-if="coopeorg" class="icon" @click="inviteDialogVisible = true">
          <img src="@/assets/shangpiao/组46.png" alt="" />
          <span @click="compile()">编辑</span>
        </span>
        <span v-else class="icon" @click="inviteDialogVisible = true">
          <img src="@/assets/shangpiao/组46.png" alt="" />
          <span @click="compile()">新增</span>
        </span>
      </h4>
      <!-- 开票信息 -->
      <ul class="ul" v-loading="loading">
        <li>
          <span>发票抬头：</span>
          <h5>{{ coopeorg.ticketname | getDate }}</h5>
        </li>
        <li>
          <span>税号：</span>
          <h5>{{ coopeorg.ticketNumber | getDate }}</h5>
        </li>
        <li>
          <span>注册地：</span>
          <h5>{{ coopeorg.ticketaddr | getDate }}</h5>
        </li>
        <li>
          <span>注册电话：</span>
          <h5>{{ coopeorg.tickettel | getDate }}</h5>
        </li>
        <li>
          <span>开户银行：</span>
          <h5>{{ coopeorg.ticketbank | getDate }}</h5>
        </li>
        <li>
          <span>开户账号：</span>
          <h5>{{ coopeorg.ticketaccountno | getDate }}</h5>
        </li>
      </ul>
    </div>
    <!-- 编辑开票信息弹框开始 -->
    <el-dialog
      class="authentication"
      title="开票信息"
      :visible.sync="centerDialogVisible"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form ref="form" :model="form" :rules="formRules" label-width="180px">
              <el-form-item label="发票抬头" prop="ticketname">
                <el-input v-model="form.ticketname" placeholder="请输入发票抬头"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form ref="form" :model="form" :rules="formRules" label-width="180px">
              <el-form-item label="税号" prop="ticketNumber">
                <el-input v-model="form.ticketNumber" placeholder="请输入税号"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form ref="form" :model="form" :rules="formRules" label-width="180px">
              <el-form-item label="注册地">
                <el-input v-model="form.ticketaddr" placeholder="请输入注册地"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form ref="form" :model="form" :rules="formRules" label-width="180px">
              <el-form-item label="注册电话">
                <el-input
                  v-model="form.tickettel"
                  placeholder="请输入注册电话"
                  @blur="verificationPhoneNo"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form ref="form" :model="form" :rules="formRules" label-width="180px">
              <el-form-item label="开户银行">
                <el-input v-model="form.ticketbank" placeholder="请输入开户银行"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form ref="form" :model="form" :rules="formRules" label-width="180px">
              <el-form-item label="开户账号">
                <el-input v-model="form.ticketaccountno" placeholder="请输入开户账号"></el-input>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOff()">取 消</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorg()">确 定</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listcoopeorg, updatecoopeorg } from '@/utils'
export default {
  data() {
    return {
      loading: false,
      rzstatus: '',
      visible: false,
      coopeorgs: '',
      coopeorg: {
        ticketname: '', //发票抬头
        ticketNumber: '', //税号
        ticketaddr: '', //注册地
        tickettel: '', //注册电话
        ticketbank: '', //开户银行
        ticketaccountno: '' //开户账号
      }, //开票信息状态变量
      centerDialogVisible: false, //点击编辑弹框状态变量
      //开票信息表单数据对象
      form: {
        ticketname: '', //发票抬头
        ticketNumber: '', //税号
        ticketaddr: '', //注册地
        tickettel: '', //注册电话
        ticketbank: '', //开户银行
        ticketaccountno: '' //开户账号
      },
      formRules: {
        ticketname: [{ required: true, message: ' ', trigger: 'blur' }],
        ticketNumber: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  filters: {
    getDate: function (value) {
      if (!value) return '-'
      let data = value
      return data
    }
  },
  mounted() {
    this.rzstatus = sessionStorage.getItem('rzstatus')
    this.coopeorgs = sessionStorage.getItem('coopeorg')
    this.listcoopeorg()
  },

  methods: {
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 1000)
    },
    // 获取开票信息数据
    async listcoopeorg() {
      this.loading = true
      let { data } = await listcoopeorg()
      if (data) {
        this.coopeorg = data
        this.loading = false
      } else {
        this.loading = false
      }
      return data
    },
    // 鼠标离开验证手机号，包括座机号
    verificationPhoneNo() {
      // 手机号正则
      let reg = /^1[3-9]\d{9}$/
      // 座机号正则
      let zjReg = /^((0\d{2,3})-)?(\d{7,8})$/
      if (reg.test(this.form.tickettel) || zjReg.test(this.form.tickettel)) {
        return
      }
      this.form.tickettel = ''
    },
    // 点击编辑按钮，将数据回显
    compile() {
      if (this.rzstatus != 'succ') return this.$Message.error('请先完成企业认证')
      this.form.ticketname = this.coopeorg.ticketname
      this.form.ticketNumber = this.coopeorg.ticketNumber
      this.form.ticketaddr = this.coopeorg.ticketaddr
      this.form.tickettel = this.coopeorg.tickettel
      this.form.ticketbank = this.coopeorg.ticketbank
      this.form.ticketaccountno = this.coopeorg.ticketaccountno
      this.centerDialogVisible = true
    },
    // 点击弹框确认按钮
    async updateCoopeorg() {
      if ((this.form.ticketname != '') & (this.form.ticketNumber != '')) {
        let parameter = {
          ticketname: this.form.ticketname,
          ticketNumber: this.form.ticketNumber,
          ticketaddr: this.form.ticketaddr,
          tickettel: this.form.tickettel,
          ticketbank: this.form.ticketbank,
          ticketaccountno: this.form.ticketaccountno,
          customerid: this.coopeorg.customerid
        }
        let data = await updatecoopeorg(parameter)
        if (data.code == 100) {
          this.$Message.success('信息修改成功')
          sessionStorage.setItem('coopeorg', 'true')
          this.listcoopeorg()
        } else {
          this.$Message.error('修改失败')
        }
        this.centerDialogVisible = false
      } else {
        this.$Message.error('请填写发票信息')
      }
    },
    // 点击取消弹框
    callOff() {
      this.$Message.warning('取消修改')
      this.centerDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
// 面包屑
.breadcrumb {
  display: flex;
  align-items: center;
  height: 0.3958rem;
  font-size: 0.0833rem;
  background-color: rgb(242, 244, 247);
  .icon {
    margin: 0 0.0521rem 0 0.0208rem;
  }
  .span {
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #999999;
  }
  img {
    width: 0.0938rem;
    height: 0.0938rem;
    margin-right: 0.026rem;
  }
}
.box {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.2604rem;
  // 标题
  .title {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 25px;
    h3 {
      font-size: 22px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #222222;
    }
  }
  // 编辑按钮
  .redact {
    display: flex;
    align-items: center;
    height: 35px;
    margin: 40px 0 35px 0px;
    cursor: pointer;
    margin-left: 30px;
    .icon {
      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }
      span {
        display: inline-block;
        width: 37px;
        height: 27px;
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #3f6ef2;
        border-bottom: 1px solid #3f6ef2;
        user-select: none;
      }
    }
  }
  .ul {
    margin-left: 30px;
    li {
      display: flex;
      margin-bottom: 40px;
      span {
        width: 120px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #999999;
      }
      h5 {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #4d4d4d;
      }
    }
  }
  // 空状态
  // .null {
  //   width: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: center;
  //   align-items: center;
  //   img {
  //     width: 326px;
  //     height: 212px;
  //   }
  //   h4 {
  //     font-size: 16px;
  //     color: #ccc;
  //   }
  // }
  // 弹出框
  .dialog-center {
    width: 90%;
    display: flex;
    justify-content: center;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 20px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      margin-bottom: 22px;
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 350px;
  @media only screen and (min-width: 1000px) and (max-width: 1535px) {
    width: 280px;
  }
  @media only screen and (min-width: 700px) and (max-width: 999px) {
    width: 270px;
  }
  @media only screen and (min-width: 1px) and (max-width: 699px) {
    width: 130px;
  }
  height: 39px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
}
::v-deep .authentication .el-dialog {
  @media only screen and (min-width: 500px) and (max-width: 860px) {
    width: 60%;
  }
  @media only screen and (min-width: 861px) and (max-width: 949px) {
    width: 50%;
  }
  @media only screen and (min-width: 950px) and (max-width: 1140px) {
    width: 45%;
  }
  @media only screen and (min-width: 1139px) and (max-width: 1285px) {
    width: 38%;
  }
  @media only screen and (min-width: 1286px) and (max-width: 1659px) {
    width: 34%;
  }
  @media only screen and (min-width: 1660px) and (max-width: 1899px) {
    width: 34%;
  }
  @media only screen and (min-width: 1900px) and (max-width: 2580px) {
    width: 30%;
  }
}
</style>
<style lang="scss">
/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 25px 0 10px;
}
.el-form-item__label {
  padding-right: 6px !important;
}
</style>
